<template>
    <label for="button" class="jul-switch" :class="{ 'is-checked': value }" @click="handleClick">
        <span class="jul-switch__core" ref="core" id="button">
            <span class="jul-switch__button"></span>
        </span>
        <input
        type="checkbox"
        class="jul-switch__input"
        :name="name"
        ref="input">
    </label>
</template>

<script>
export default {
    name: 'JulSwitch',
    props: {
        value: {
            type: Boolean,
            default: false
        },
        activeColor: {
            type: String,
            default: ''
        },
        inactiveColor: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        }
    },
    methods: {
     async handleClick() {
        this.$emit('input', !this.value)
        //  点击的时候还要修改背景色
        // console.log(this.value)  这里的时候父元素还没有改变值 因为vue中更新DOM是异步的 需要$nextTick去操作DOM
        // 等待value发生改变，在setColor
        // 数据修改后，等待DOM更新，再去修改按钮的颜色
        await this.$nextTick()
        console.log(this.value)
        this.setColor()
        this.$refs.input.checked = this.value
     },
    setColor() {
        if (this.activeColor || this.inactiveColor) {
            const color = this.value ? this.activeColor : this.inactiveColor
            console.log(color)
            this.$refs.core.style.borderColor = color
            this.$refs.core.style.backgroundColor = color
        }
     }
    },
    mounted() {
        // 修改开关的颜色
        this.setColor()
        // 控制checkbox的checkbox
        this.$refs.input.checked = this.value
    }
}
</script>

<style lang="scss">
    .jul-switch {
        display: inline-flex;
        align-items: center;
        position: relative;
        font-size: 14px;
        line-height: 20px;
        height: 20px;
        vertical-align: middle;
        .jul-switch__input {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0;
            margin: 0;
        }
        .jul-switch__core {
            margin: 0;
            display: inline-block;
            width: 40px;
            height: 20px;
            border: 1px solid #dcdfe6;
            outline: none;
            border-radius: 10px;
            box-sizing: border-box;
            background: #dcdfe6;
            cursor: pointer;
            transition: border-color .3s,background-color .3s;
            vertical-align: middle;
            .jul-switch__button {
                position: absolute;
                top: 1px;
                left: 1px;
                border-radius: 100%;
                transition: all .3s;
                width: 17px;
                height: 17px;
                background-color: #fff;
            }
        }
    }

    // 开关被选中的样式
    .jul-switch.is-checked {
        .jul-switch__core {
            border-color: #52c407;
            background-color: #52c407;
            .jul-switch__button {
                transform: translateX(20px);
            }
        }
    }
</style>
